<template>
  <div class="container">
    <el-card class="container-form">
      <el-form label-suffix="：">
        <el-form-item label="筛选" required>
          <el-button-group>
            <el-button
              :type="notcheck"
              size="mini"
              @click="handleType('notcheck')"
              >待审核
            </el-button>
            <el-button :type="check" size="mini" @click="handleType('check')"
              >已审核
            </el-button>
            <el-button
              :type="notpass"
              size="mini"
              @click="handleType('notpass')"
              >未通过
            </el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="container-result">
      <thy-caption title="查询结果" margin> </thy-caption>
      <el-table size="small" stripe border :data="list" v-loading="loading">
        <el-table-column prop="id" label="序号" width="80"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="date" label="出生日期"> </el-table-column>
        <el-table-column prop="company" label="公司"> </el-table-column>
        <el-table-column prop="industry" label="行业"> </el-table-column>
        <el-table-column prop="job" label="工作"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="invite_phone" label="邀请人电话">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
        </el-table-column>
        <el-table-column prop="user_id" label="用户号"> </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
          v-if="currentpage == 0"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleButton(scope.row, 'pass')"
              type="text"
              size="small"
              >通过</el-button
            >
            <el-button
              @click="handleButton(scope.row, 'notpass')"
              type="text"
              size="small"
              >不通过</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :current-page="page"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'computer',
  data() {
    return {
      loading: true,
      list: [],
      total: 0,
      page: 1,
      notpass: 'info',
      notcheck: 'primary',
      check: 'info',
      currentpage: 0
    };
  },
  methods: {
    getList(page, status, callback = () => {}) {
      this.loading = true;
      return this.$request
        .get('/admin/apply/list?page=' + page + '&pageSize=10&status=' + status)
        .then(data => {
          this.list = data.rows.map(cardinfo => {
            if (cardinfo.status == 0) cardinfo.status = '待审核';
            else if (cardinfo.status == 1) cardinfo.status = '审核通过';
            else cardinfo.status = '审核未通过';
            return cardinfo;
          });
          this.total = data.count;
          this.page = page;
          callback(data);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleCurrentChange(page) {
      this.getList(page, this.currentpage);
    },
    handleButton(info, type) {
      let status = type === 'pass' ? 1 : 2;
      return this.$request
        .post('/admin/apply/update', {
          id: info.id,
          status: status,
          phone: info.phone
        })
        .then(() => {
          this.getList(this.page, this.currentpage);
        });
    },
    handleType(type) {
      if (type == 'notpass') {
        this.getList(1, 2, () => {
          this.notpass = 'primary';
          this.notcheck = 'info';
          this.check = 'info';
          this.currentpage = 2;
        });
      } else if (type == 'notcheck') {
        this.getList(1, 0, () => {
          this.notpass = 'info';
          this.notcheck = 'primary';
          this.check = 'info';
          this.currentpage = 0;
        });
      } else {
        this.getList(1, 1, () => {
          this.notpass = 'info';
          this.notcheck = 'info';
          this.check = 'primary';
          this.currentpage = 1;
        });
      }
    }
  },
  mounted() {
    this.getList(1, 0);
  }
};
</script>

<style>
</style>
